<template>
  <view class="index">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <nut-searchbar v-model="searchValue" placeholder="搜索商品" @search="onSearch" />
    </view>

    <!-- 轮播图 -->
    <view class="banner">
      <nut-swiper :init-page="0" :pagination-visible="true" pagination-color="#fa2c19" auto-play="3000">
        <nut-swiper-item v-for="(item, index) in banners" :key="index">
          <img :src="item.imgUrl" :alt="item.name" mode="aspectFill" />
        </nut-swiper-item>
      </nut-swiper>
    </view>

    <!-- 分类导航 -->
    <view class="nav-category">
      <nut-grid :column-num="5">
        <nut-grid-item v-for="(item, index) in categories" :key="index" @click="onCategoryClick(item)">
          <component :is="item.icon" size="30" />
          <text>{{ item.name }}</text>
        </nut-grid-item>
      </nut-grid>
    </view>

    <!-- 商品列表 -->
    <view class="goods-list">
      <nut-divider>热门商品</nut-divider>
      <template v-if="loading">
        <view class="loading-placeholder">
          <nut-grid :column-num="2" :border="false">
            <nut-grid-item v-for="i in 4" :key="i">
              <view class="goods-card skeleton">
                <view class="image-placeholder"></view>
                <view class="info-placeholder">
                  <view class="title-placeholder"></view>
                  <view class="price-placeholder"></view>
                </view>
              </view>
            </nut-grid-item>
          </nut-grid>
        </view>
      </template>
      <template v-else>
        <nut-grid :column-num="2" :border="false">
          <nut-grid-item v-for="item in products" :key="item.id" @click="onProductClick(item)">
            <view class="goods-card">
              <image :src="item.imgUrl" mode="aspectFill" class="goods-image" />
              <view class="goods-info">
                <view class="goods-name">{{ item.name }}</view>
                <view class="price-info">
                  <nut-price :price="item.price" size="normal" />
                  <nut-price v-if="item.vipPrice" :price="item.vipPrice" size="small" class="vip-price" />
                </view>
              </view>
            </view>
          </nut-grid-item>
        </nut-grid>
      </template>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, markRaw, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import { Search, Cart, Shop, Shop3, Star } from '@nutui/icons-vue-taro'
import api from '@/api'

// 类型定义
interface Banner {
  imgUrl: string;
  name: string;
}

interface Category {
  icon: any;
  name: string;
}

interface Product {
  id: number;
  imgUrl: string;
  name: string;
  price: string;
  vipPrice?: string;
}

// 加载状态
const loading = ref(true);

// 搜索相关
const searchValue = ref('')
const onSearch = (val: string) => {
  if (!val.trim()) return;
  Taro.navigateTo({ url: `/pages/search/index?keyword=${encodeURIComponent(val)}` })
}

// 轮播图数据
const banners = ref<Banner[]>([
  {
    imgUrl: 'https://img12.360buyimg.com/babel/s1180x940_jfs/t1/170098/1/33255/100430/63aa19e3E0c17d522/4d4ca21c7e49dd01.jpg.webp',
    name: '新年特惠'
  },
  {
    imgUrl: 'https://img12.360buyimg.com/babel/s1180x940_jfs/t1/170098/1/33255/100430/63aa19e3E0c17d522/4d4ca21c7e49dd01.jpg.webp',
    name: '年货节'
  },
  {
    imgUrl: 'https://img11.360buyimg.com/babel/s1180x940_jfs/t1/136073/35/30095/126223/63aa19e3E4aa4bef8/7b45761968146ce9.jpg.webp',
    name: '限时秒杀'
  }
])

// 分类数据
const categories = ref<Category[]>([
  { icon: markRaw(Shop), name: '超市' },
  { icon: markRaw(Shop3), name: '新品' },
  { icon: markRaw(Cart), name: '促销' },
  { icon: markRaw(Star), name: '精选' },
  { icon: markRaw(Search), name: '更多' }
])

// 商品数据
const products = ref<Product[]>([
  {
    id: 1,
    imgUrl: 'https://img14.360buyimg.com/n1/s546x546_jfs/t1/106207/35/33316/168578/632a7361E7bd1f38e/1006e302770e3811.jpg',
    name: 'iPhone 13 Pro',
    price: '5999',
    vipPrice: '5899'
  },
  {
    id: 2,
    imgUrl: 'https://img14.360buyimg.com/n1/s546x546_jfs/t1/106207/35/33316/168578/632a7361E7bd1f38e/1006e302770e3811.jpg',
    name: '华为 Mate 50',
    price: '4999',
    vipPrice: '4899'
  },
  {
    id: 3,
    imgUrl: 'https://img14.360buyimg.com/n1/s546x546_jfs/t1/178015/17/30654/74077/6368cb89Ef2f24f3d/a6c2443c9e2ce491.jpg',
    name: '小米 12S Ultra',
    price: '4699',
    vipPrice: '4599'
  },
  {
    id: 4,
    imgUrl: 'https://img14.360buyimg.com/n1/s546x546_jfs/t1/195164/25/30800/47837/635f8075E27fad736/6c86f44d0f9aa3c3.jpg',
    name: 'OPPO Find X5',
    price: '3999',
    vipPrice: '3899'
  }
])

// 事件处理
const onCategoryClick = (category: Category) => {
  Taro.navigateTo({ url: `/pages/category/index?type=${encodeURIComponent(category.name)}` })
}

const onProductClick = (product: Product) => {
  Taro.navigateTo({ url: `/pages/goods-details/index?id=${product.id}` })
}

// 加载首页数据
const loadData = async () => {
  try {
    loading.value = true;
    
    // 这里应该调用实际API获取数据
    // const [bannersData, productsData] = await Promise.all([
    //   api.common.getBanners(),
    //   api.goods.getHotGoods(10)
    // ]);
    
    // banners.value = bannersData;
    // products.value = productsData.list;
    
    // 模拟API调用延迟
    await new Promise(resolve => setTimeout(resolve, 500));
    
    loading.value = false;
  } catch (error) {
    console.error('加载首页数据失败', error);
    Taro.showToast({
      title: '加载数据失败，请稍后再试',
      icon: 'none'
    });
    loading.value = false;
  }
}

onMounted(() => {
  loadData();
})
</script>

<style lang="scss">
.index {
  min-height: 100vh;
  background: #f7f8fa;
  
  .search-bar {
    background: #fff;
    padding: 8px 16px;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .banner {
    margin-bottom: 10px;
    
    img {
      width: 100%;
      height: 150px;
      object-fit: cover;
      display: block;
    }
  }

  .nav-category {
    background: #fff;
    margin-bottom: 10px;
    padding: 10px 0;

    .nut-grid-item {
      text-align: center;
      
      .nut-icon {
        margin-bottom: 5px;
      }

      text {
        font-size: 12px;
        color: #333;
      }
    }
  }

  .goods-list {
    background: #fff;
    padding-bottom: 20px;
  
    .goods-card {
      margin: 5px;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

      .goods-image {
        width: 100%;
        height: 150px;
        border-radius: 4px 4px 0 0;
      }

      .goods-info {
        padding: 8px;

        .goods-name {
          font-size: 14px;
          color: #333;
          margin-bottom: 5px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          min-height: 42px;
        }

        .price-info {
          display: flex;
          align-items: center;
          gap: 5px;

          .vip-price {
            color: #999;
            text-decoration: line-through;
          }
        }
      }
      
      &.skeleton {
        .image-placeholder {
          width: 100%;
          height: 150px;
          background: #f2f2f2;
          border-radius: 4px 4px 0 0;
        }
        
        .info-placeholder {
          padding: 8px;
          
          .title-placeholder {
            height: 12px;
            background: #f2f2f2;
            margin-bottom: 5px;
            border-radius: 2px;
          }
          
          .price-placeholder {
            height: 16px;
            width: 60%;
            background: #f2f2f2;
            border-radius: 2px;
          }
        }
      }
    }
  }
}
</style>